<template>
  <div v-if="isAllocation" class="allocation" @click.stop>
    <SvgIcon class="exit" name="关闭" :size="18" @click="emit('show')" color="#81868F" />
    <p>为Pocket配置Wi-Fi</p>
    <p>Pocket将使用所填写的Wi-Fi进行联网</p>
    <van-form class="form" @submit="onSubmit">
      <!-- <van-field v-model="formData.ssid" label-align="top" name="ssid" label="Wi-Fi 名称" placeholder="请输入Wi-Fi名称"
            :rules="[{ required: true, message: '请填写Wi-Fi名称' }]" /> -->
      <van-field v-model="formData.mode" is-link readonly label-align="top" label="Wi-Fi 名称" placeholder="选择Wi-Fi名称"
        @click="showPicker = true" :rules="[{ required: true, message: '请填写Wi-Fi名称' }]" />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" :columns-field-names="{ text: 'mode', value: 'mode', }"
          @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
      <van-field v-model="formData.password" label-align="top" type="password" name="password" label="Wi-Fi 密码"
        placeholder="请输入Wi-F
        i密码" :rules="[{ required: true, message: '请填写Wi-Fi密码' }]" />
      <div class="form-button">
        <van-button round block>
          取消
        </van-button>
        <van-button round block type="primary" :disabled="buttonDisabled" native-type="submit">
          {{ networkingbutton }}
        </van-button>
      </div>
    </van-form>
  </div>
  <div v-else class="success" @click.stop>
    <SvgIcon class="exit" name="关闭" :size="18" @click="emit('show')" color="#81868F" />
    <p>Wi-Fi配置成功</p>
    <p>Pocket设备已成功使用此Wi-Fi联网</p>
    <div class="success-button"><van-button type="primary" @click="onsuccess">确定</van-button></div>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue';
import { ref, onMounted } from 'vue'
import { wifiList, connectWifi } from '@/api/index'

const emit = defineEmits(['show'])
//下一步按钮是否禁用
const buttonDisabled = ref(false)
const showPicker = ref(false)
const isAllocation = ref(true)

//通过设备id连接 点击确定时为验证中...
const networkingbutton = ref('确定')
const columns = ref([])

const onConfirm = ({ selectedIndexes, selectedValues, selectedOptions }) => {
  formData.value.mode = selectedValues[0]
  formData.value.bssid = selectedOptions[selectedIndexes[0]].bssid
  showPicker.value = false
  console.log(formData.value)
}
const onsuccess = () => {
  emit('show')
  isAllocation.value = ref(true)
}
const formData = ref({
  bssid: '',
  password: '',
  mode: ''
})
const onSubmit = async () => {
  console.log('onSubmit')
  try {
    networkingbutton.value = '验证中...'
    buttonDisabled.value = true
    const data = await connectWifi({ ...formData.value })
    networkingbutton.value = '确定'
    buttonDisabled.value = false
    if (data.code == 200) {
      // router.push('/')
      isAllocation.value = false
    } else if (data.code === 500) {
      ElMessage.error('密码错误，请重试!')
    }
  } catch (e) {
    console.error('网络出现问题!')
    isAllocation.value = false
    networkingbutton.value = '确定'
    buttonDisabled.value = false
  }
}
onMounted(async () => {
  try {

    const { data } = await wifiList()
    console.log(data)
    columns.value = data

  } catch (e) {
    console.error('wifi名称列表数据获取失败!')
  }
});
</script>

<style lang="scss" scoped>
.exit {
  position: absolute;
  right: 16px;
  top: 12px;
}

.allocation {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 319px;
  height: 364px;
  border-radius: 8px;
  border: 1px solid #B2B2B2;
  background: #FFF;
  box-shadow: 0px 20px 64px 0px rgba(0, 0, 0, 0.16);
  padding: 30px;

  :deep(.form) {
    width: 100%;

    padding: 0;
    margin: 0;

    .van-cell {
      padding: 0;
      height: 98px;
      display: flex;
      justify-content: center;
      align-items: center;

      .van-cell__value {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .van-field__error-message {
          position: absolute;
          bottom: -20px;
        }
      }

      .van-badge__wrapper {
        position: absolute !important;
        right: 20px;
        bottom: 21px;
      }

      .van-cell__title {
        height: 20px;

        label {
          margin-left: 10px;
        }
      }

      .van-field__label--top {
        margin-bottom: -20px;
      }
    }

    .form-button {
      display: flex;
      justify-content: end;
      margin-top: 25px;

      button {
        width: 90px;
        height: 36px;
        border-radius: 4px;


        &:nth-child(1) {
          margin-right: 20px;

        }
      }
    }

    input {
      padding: 0 16px;
      width: 255px;
      height: 40px;
      border-radius: 6px;
      border: 1px solid #E1E2E5;
    }
  }

  p {
    &:nth-child(2) {
      color: #000;
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 8px;
    }

    &:nth-child(3) {
      color: #686868;

      font-family: "Microsoft YaHei";
      font-size: 14px;
      margin-bottom: 15px;
    }
  }


}

.success {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 319px;
  height: 180px;
  border-radius: 8px;
  background-color: #fff;
  padding: 30px;

  .success-button {
    text-align: end;
    margin-top: 20px;

    button {
      width: 90px;
      height: 36px;
    }
  }

  p {
    &:nth-child(2) {
      color: #000;
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 8px;
      margin-top: 15px;
    }

    &:nth-child(3) {
      color: #686868;

      font-family: "Microsoft YaHei";
      font-size: 14px;
      margin-bottom: 15px;
    }
  }
}
</style>
